import React from 'react';
import { ReceiptType } from '../../../../../assets/enum'
import { Form, Button, Space, Row, Col, Typography, InputNumber, Select } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const { Option } = Select;
const { Title } = Typography;

/**
 * @description: 收款模式 
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-07-26）收款方式 参数改变
 */


const ItemModule = () => {
    return (
        <>
            <Title level={3}>收款科目</Title>
            <Row key="6">
                <Col span={24}>
                    <Form.List name="item">
                        {(fields, { add, remove }) => (
                            <>
                                {fields.map(({ key, name, fieldKey, ...restField }, index) => (
                                    <Space key={key} align="baseline" >
                                        <Form.Item
                                            label="收款方式"
                                            name={[name, 'item']}
                                            fieldKey={[fieldKey, 'item']}
                                            rules={[{ required: true, message: '请选择收款方式' }]}
                                        >
                                            <Select style={{ width: 120 }} >
                                                {
                                                    ReceiptType.map(item => <Option value={item.value} key={item.value}>{item.label}</Option>)
                                                }
                                            </Select>
                                        </Form.Item>
                                        <Form.Item
                                            label="应收金额（元）"
                                            name={[name, 'ribAccounts']}
                                            fieldKey={[fieldKey, 'ribAccounts']}
                                            rules={[{ required: true, message: '请填写应收金额！' }]}
                                        >
                                            <InputNumber />
                                        </Form.Item>
                                        <MinusCircleOutlined onClick={(ß) => remove(name)} />
                                    </Space>
                                ))}
                                <Form.Item {...tailLayout} className="item-materials-button">
                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                        添加收款科目
                                    </Button>
                                </Form.Item>
                            </>
                        )}
                    </Form.List>
                </Col>
            </Row>
        </>
    )
}

const tailLayout = {
    wrapperCol: { offset: 0, span: 24 },
};

export default ItemModule;